
<template>
	<view @click="go('search')" sticky top-0 z-100 bg-white>
		<uni-search-bar radius="5" placeholder="请输入搜索关键词" ref="searchBar" cancelButton="none" readonly />
	</view>

	<view class="page page-index">
		
		<swiper class="swiper-wrap" circular :indicator-dots="true" :autoplay="true" ml-10px mr-10px>
			<swiper-item v-for="item in swiperList">
				<image class="image w-full" :src="item.image" mode="aspectFill" @click="goPage(item)"></image>
			</swiper-item>
		</swiper>

		<uni-group mode="card">
			<uni-grid :column="3" :showBorder="false" :square="false" :highlight="false">
				<uni-grid-item >
					<view class="tc">
						<view text-xs><text font-400 text-2xl c-red mr-2px>{{ base.baseInfo.business_num }}</text>条</view>
						<view text-sm>今日商机数</view>
					</view>
				</uni-grid-item>
				<uni-grid-item >
					<view class="tc">
						<view text-xs><text font-400 text-2xl c-red mr-2px>{{ base.baseInfo.askbuy_num }}</text>条</view>
						<view text-sm>今日求购</view>
					</view>
				</uni-grid-item>
				<uni-grid-item >
					<view class="tc">
						<view text-xs><text font-400 text-2xl c-red mr-2px>{{ base.baseInfo.firm_num }}</text>家</view>
						<view text-sm>今日入驻企业</view>
					</view>
				</uni-grid-item>
			</uni-grid>

			<uni-notice-bar :text="notice" show-icon scrollable speed="30" background-color="#fff" color="#de8c17" />
		</uni-group>

		<uni-group mode="card">
			<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
				<uni-grid-item pb-10px bg-blue-1>
					<view class="tc c-green-7"  @click="go('pickupproduct')">
						<view text-3xl class="icon icon-pickup"></view>
						<view text-base>集采</view>
					</view>
				</uni-grid-item>
				<uni-grid-item bg-blue-1 ml-1px>
					<view class="tc c-red-5" @click="go('salesproduct')">
						<view text-3xl class="icon icon-sale"></view>
						<view text-base>寄售</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-group>

		<uni-section title="商品推荐" type="line" pl-10px pr-10px v-if="recommendList.length">
			<view class="card-item" v-for="v in recommendList" :key="v.goods_id">
				<view class="list-item" @click="goProduct(v.goods_id)">
					<image class="logo" :src="v.image_thumb" mode="aspectFill" />
					<view class="right">
						<view>
							<view text-base fw-600 truncate>{{ v.name }}</view>
							<view text-s c-gray-5 truncate>{{ v.description }}</view>
							<view c-red-5 fw-500 text-base>￥{{ v.price || '可议价' }}</view>
							<view text-s c-gray-5 truncate pb-4px>热卖：{{ v.putaway }}</view>
						</view>
						<view class="to-store" @click.stop="goStore(v.shop_id)">
							<view text-s c-gray-5 truncate>{{ v.firm.firm_name }}</view>
							<view pl-5px pr-2px>进店</view>
							<view class="icon icon-angle-right"></view>
						</view>
					</view>
				</view>
			</view>
		</uni-section>
		
	</view>

	<tabbar></tabbar>

</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { useBaseStore } from '@/stores/user'
	const base = useBaseStore()
	import { onShareAppMessage } from "@dcloudio/uni-app"
	// const avatar = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'

	const swiperList = ref([])
	const notice = ref('')
	const recommendList = ref([])
	async function fn(){
		swiperList.value = await api.getAddList({type: 'home'})
		const broadcast = await api.getBroadcast({type: 'home'})
		const res = await api.getBaseInfo()
		base.setBase(res)
		notice.value = broadcast.map(i => i.content).join('  ')
		const { list } = await api.goodsList({
			page_size: 100,
			page_no: 1,
			recommend: 1
		})
		recommendList.value = list
	}
	fn()

	const goPage = ({source,link}) => {
		if(!source || !link) return
		let router = 'product'
		if(source == 'firm') {
			router = 'enterprise'
		}
		uni.navigateTo({ 
			url: `/pages/${router}/detail?id=${link}`
		})
	}

	const goStore = id => {
		uni.navigateTo({
			url: `/pages/store/detail?id=${id}`
		})
	}

	const goDetail = id => {
		uni.navigateTo({
			url: `/pages/enterprise/detail?id=${id}`
		})
	}

	const goProduct = id => {
		uni.navigateTo({
			url: `/pages/product/detail?id=${id}`
		})
	}

	onShareAppMessage(() => {
		return {
			title: '汇塑云商',
			path: '/pages/index/index'
		}
	})
</script>

<style lang="scss">
.uni-searchbar {
	background-color: white;
}
.page.page-index {

	min-height: auto;
	.uni-group__content {
			padding: 0;
	}
	.uni-noticebar {
		margin-bottom: 0;
	}

	.uni-grid-item {
		padding: 10px 0 0;
	}

	.text1 {
		font-size: 12px;
	}
	.text2 {
		font-size: 13px;
	}

	.swiper-wrap {
		height: auto;
		aspect-ratio: 16/9;
		.image {
			width: 100%;
			height: 100%;
			aspect-ratio: 16/9;
		}
	}

	.card-item {
		padding: 30upx;
		box-shadow: 0 0 4px 0 silver;
		margin-bottom: 20upx;
		.list-item {
			display: flex;
			align-items: center;
			
			.logo {
				aspect-ratio: 3/4;
				width: 200upx;
				height: auto;
			}

			.right {
				padding-left: 15px;
				flex: 1;
				align-self: stretch;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.to-store {
				display: inline-flex;
				align-items: center;
				align-self: flex-end;
				background-color: #f1f1f1;
				border-radius: 100px;
				padding: 10upx 20upx;
				box-sizing: border-box;
			}
		}
	}

}
	
</style>

